<template lang="html">
    <div>
        <SlotTest></SlotTest>
        <RoomCard :room="room" v-on:checkin="outCheckin" @checkout="outCheckout">
    
        </RoomCard>
        <div @click="outalert">
            <SlotDaemon class="son" @click.native.stop="alert">
                <div slot="slotA">组件外部内容</div>
                <div slot="slotB"><button @click.stop="alert">slot</button></div>
            </SlotDaemon>
        </div>
        
        
    </div>
</template>
<script>
    //引入组件 
import RoomCard from "@/components/RoomCard.vue";
import SlotDaemon from "@/components/SlotDaemon.vue";
import SlotTest from "@/components/SlotTest.vue";
export default {
    //注册组件
    components:{
        RoomCard,
        SlotDaemon,
        SlotTest
    },
    data() {
        return {
            room:{
                roomNo:355,
                roomStatus:'入住',
                roomType:'小床'
            },
            room1:{
                roomNo:401,
                roomStatus:'未入住',
                roomType:'大床'
            }
        }
    },
    methods: {
        outCheckin(value){
            console.log(value);
        },
        outCheckout(value){
            alert(value.roomNo+"要退房");
        },
        alert(){
            alert("子组件事件")
        },
        outalert(){
            alert("外围事件响应")
        }
    },
    
}
</script>
<style lang="css">
    .son{
        padding: 20px;
        border: blue solid 1px;
    }
</style>